<template>
  <div class="wrapper">
    <div class="search">
      <span class="iconfont">&#xe6c5;</span>
      <input
        class="search__area"
        placeholder="山姆会员商店优惠商品"
        @change="handleSearchChange"
      />
      <div class="search__cancel" @click="handleCancelSearchClick">取消</div>
    </div>
    <div class="area" v-if="history.length">
      <h4 class="area__title">
        搜索历史
        <span class="area__title__clear" @click="handleClearHistoryClick"
          >清除搜索历史</span
        >
      </h4>
      <ul class="area__list">
        <li
          class="area__list__item"
          v-for="item in history"
          :key="item"
          @click="() => goToSearchList(item)"
        >
          {{ item }}
        </li>
      </ul>
      <div class="area">
        <h4 class="area__title">热门搜索</h4>
        <ul class="area__list">
          <li
            class="area__list__item"
            v-for="item in hotWordList"
            :key="item"
            @click="() => goToSearchList(item)"
          >
            {{ item }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";

//热词相关逻辑
const useHotWordListEffect = () => {
  const hotWordList = ref([]);
  const getHotWordList = async () => {
    axios
      .get("/api/search/hot-words")
      .then((result) => {
        let { data } = result.data;
        if (result.status == 200) {
          hotWordList.value = data; //热门搜索数据
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };
  return { hotWordList, getHotWordList };
};

export default {
  name: "Home",
  setup() {
    const router = useRouter(); //路由
    //获取缓存
    const history = ref(JSON.parse(localStorage.history || "[]"));
    //当用户输入搜索内容后，执行的操作
    const handleSearchChange = (e) => {
      console.log(e.target.value);
      const searchValue = e.target.value;
      if (!searchValue) return;
      const hasValue = history.value.find((item) => item === searchValue);
      //没有重复的值，存缓存
      if (!hasValue) {
        history.value.push(searchValue);
        localStorage.history = JSON.stringify(history.value);
      }
      //跳转页面
      router.push(`/searchList?keyword=${searchValue}`);
    };

    //当清理历史记录时候，执行的操作
    const handleClearHistoryClick = () => {
      history.value = [];
      localStorage.history = JSON.stringify([]); //换成变成空数组
    };

    // 当取消搜索时，执行的操作
    const handleCancelSearchClick = () => {
      router.back();
    };

    //页面跳转逻辑
    const goToSearchList = (keyword) => {
      router.push(`/searchList?keyword=${keyword}`);
    };

    //使用热搜词逻辑
    const { hotWordList, getHotWordList } = useHotWordListEffect(); //引入
    getHotWordList();
    return {
      history,
      hotWordList,
      goToSearchList,
      handleSearchChange,
      handleClearHistoryClick,
      handleCancelSearchClick,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/viriables.scss";
.wrapper {
  margin: 0 0.18rem;
  .search {
    position: relative;
    display: flex;
    height: 0.32rem;
    line-height: 0.32rem;
    margin-top: 0.16rem;
    color: $content-fontcolor;
    .iconfont {
      position: absolute;
      left: 0.16rem;
      color: $search-fontColor;
    }
    &__area {
      flex: 1;
      padding: 0 0.12rem 0 0.44rem;
      background: #f5f5f5;
      border-radius: 0.16rem;
      border: none;
      outline: none;
    }
    &__cancel {
      margin-left: 0.12rem;
      font-size: 0.16rem;
    }
  }
  .area {
    margin-top: 0.24rem;
    &__title {
      line-height: 0.22rem;
      margin: 0;
      font-size: 0.16rem;
      font-weight: normal;
      color: #333;
      &__clear {
        float: right;
        font-size: 0.14rem;
      }
    }
    &__list {
      margin: 0 0 0 -0.1rem;
      padding: 0;
      list-style-type: none;
      &__item {
        line-height: 0.32rem;
        margin-left: 0.1rem;
        margin-top: 0.12rem;
        padding: 0 0.1rem;
        font-size: 0.14rem;
        background: $search-bgColor;
        display: inline-block;
        border-radius: 0.02rem;
        color: $medium-fontColor;
      }
    }
  }
}
</style>
